<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./css/PersonalCenter.css" />
		<title>个人中心</title>
	</head>
	<body>
		<!-- 侧边栏 -->
		<div class="cebianlan">
			<div class="zhixun">
				<img src="img/6咨询.png">
				<div class="zhixun1"><a href="#">咨询</a></div>
			</div>
			<div class="bangzhu">
				<img src="img/帮助.png">
				<div class="zhixun1"><a href="#">帮助</a></div>
			</div>
			<div class="weixin">
				<img src="img/微信.png" class="wiexin1">
				<div class="zhixun1"><a href="#">微信</a></div>
				<div class="weixin2">
					<span>欢迎关注米泡教育</span>
					<img src="./img/erweima.jpg">
				</div>
			</div>
			<div class="yanjing">
				<img src="img/眼睛.png">
				<div class="zhixun1"><a href="#">监督</a></div>

			</div>
			<div class="yanjing">
				<a href="#maodian"><img src="img/向上.png"></a>
			</div>

		</div>
		<!-- 导航栏 -->
		<div class="f1" id="maodian">
			<div class="container">
				<!-- 左侧 -->
				<div class="left">
					<img src="./img/head-logo.svg" alt="">
					<ul class="nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="mianfei_course.html">免费课</a></li>
						<li><a href="shizhan_course.html">精品课</a></li>
					</ul>
				</div>
				<!-- 右侧 -->
				<div class="right">
					<div class="souSuo">
						<input type="text" placeholder="请输入课程" id="input" />
						<a href=""><img src="img/黄色搜索icon.png"></a>
					</div>
					<div class="gouWuChe">
						<img src="img/购物车.png">
						<span><a href="Shopping_cart.html">购物车</a></span>
					</div>
					<div class="geRenZhonXin">
						<span><a href="#">个人中心</a></span>
						<div class="touxiang">
							<img src="img/1.jpg" alt="">
							<ul class="xialacaidan">
								<!-- 下拉菜单 -->
								<li><a href="PersonalCenter.html">我的账户</a></li>
								<li><a href="PersonalCenter.html">我的课程</a></li>
								<li><a href="login.html">退出</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第二楼 -->
		<div class="f2">
			<div class="container" id="tabs">
				<div class="f2_header">
					<span class="cur" data-index='0'>我的课程</span>
					<span data-index='1'>我的账户</span>
					<span data-index='2'>个人资料</span>
				</div>
				<div class="f2_body">
					<div class="cur" id="myCourse">
						<div class="header_title">
							<span>课程</span>
							<span>标题</span>
							<span>有效期</span>
							<span>操作</span>
						</div>
						<!-- 第一门课 -->
						<!-- 						<div class="center">
							<div>
								<img src="./img_course/shizhanke/1/4.png" alt="">
							</div>
							<div>
								Python面试复习宝典
							</div>
							<div>
								永久有效
							</div>
							<div>
								<button type="button">去学习</button>
							</div>
						</div> -->

					</div>
					<div id="myCount">
						<div>您的账户余额为：</div>
						<div>
							<span>0</span>
							<span>￥</span>
						</div>
						<div>
							<span><a href="#">点击充值……</a></span>
						</div>
					</div>
					<div id="myInformation">
						<div class="one">
							<div><img src="./img/1.jpg"></div>
							<div>
								<p>1</p>
								<p>中国</p>
								<p>这位用户很懒，什么也没有写……</p>
							</div>
						</div>
						<div class="jibenxinxi_title">
							<div>
								<span>基本信息</span>
								<span>
									<button type="button">
										<img src="./img/修改.png">
										<span>修改</span>
									</button>
								</span>
							</div>
							<div class="jibenxinxi_body">
								<ul>
									<li>
										<span>用户ID:</span>
										<label for="">1</label>
									</li>
									<li>
										<span>用户名:</span>
										<label for="">喵小妖</label>
									</li>
									<li>
										<span>年龄:</span>
										<label for="">22</label>
									</li>
									<li>
										<span>性别:</span>
										<label for="">女</label>
									</li>
									<li>
										<span>个性签名:</span>
										<label for="">ggggggggggggggg</label>
									</li>
								</ul>
							</div>
						</div>
						<div class="zhanghuanquan">
							<p>账户安全</p>
							<ul>
								<li>
									<span>密码</span>
									<button>修改密码</button>
								</li>
								<li>
									<span>邮箱:</span>
									<label for="">123@123.com</label>
									<button>修改邮箱</button>
								</li>
								<li>
									<span>手机号</span>
									<label for="">13988888888</label>
									<button>修改手机号</button>
								</li>
							</ul>
						</div>
						<!-- 隐藏起来的盒子 -->
						<div class="xiugai_gerenxinxi">
							<p>
								<span>修改您的信息</span>
								<span>
									<img src="./img/错误.png">
								</span>
							</p>
							<div>
								<ul>
									<li>
										<label for="">用户名:</label>
										<input type="text" placeholder="用户名长度为3-12位" class="user">
									</li>
									<li>
										<label for="">年龄:</label>
										<input type="text" placeholder="年龄必须大于0小于150" class="age">
									</li>
									<li>
										<label for="">性别:</label>
										<select name="" class="sex">
											<option value="男">男</option>
											<option value="女">女</option>
										</select>
									</li>
									<li>
										<label for="">个性签名</label>
										<textarea rows="5" cols="40" maxlength="50"
											onchange="this.value=this.value.substring(0,50)"
											onkeydown="this.value=this.value.substring(0,50)"
											onkeyup="this.value=this.value.substring(0,50)"
											placeholder="请输入个性签名,长度在五十个字符哟" class="geqian"></textarea>
									</li>
									<li>
										<button type="button" class="queren">确认修改</button>
									</li>
								</ul>
							</div>
						</div>
						<!-- 邮箱 -->
						<div class="xiugai_youxiang">
							<div>
								<span>修改您的邮箱</span>
								<span>
									<img src="./img/错误.png">
								</span>
							</div>
							<div>
								<label for="">新邮箱:</label>
								<input type="text" placeholder="请输入合法格式的邮箱" class="youxiang">
							</div>
							<div>
								<button type="button" class="youxiang_xiugai">确认修改</button>
							</div>
						</div>
						<!-- 密码 -->
						<div class="xiugai_mima">
							<div>
								<span>修改密码</span>
								<span>
									<img src="./img/错误.png">
								</span>
							</div>
							<div>
								<label for="">旧密码:</label>
								<input type="password" placeholder="请输入旧密码" class="mima_j">
							</div>
							<div>
								<label for="">新密码:</label>
								<input type="password" placeholder="请输入新密码" class="mima_x">
							</div>
							<div>
								<button type="button" class="mima_xiugai">确认修改</button>
							</div>
						</div>
						
						<!-- 手机号 -->
						<div class="xiugai_shoujihao">
							<div>
								<span>修改您的手机号</span>
								<span>
									<img src="./img/错误.png">
								</span>
							</div>
							<div>
								<label for="">新手机号:</label>
								<input type="text" placeholder="请输入合法格式的手机号" class="shoujihao">
							</div>
							<div>
								<button type="button" class="shoujihao_xiugai">确认修改</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 最后一楼 -->
		<div class="foot1">
			<div class="container">
				<!-- 左边 -->
				<div class="left">
					<div class="foot-Box">
						<div class="title">关于米泡</div>
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">荣誉资质</a></li>
							<li><a href="#">网站地图</a></li>
							<li><a href="#">练习我们</a></li>
							<li><a href="#">加入我们</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">帮助中心</div>
						<ul>
							<li><a href="#">如何购买观看</a></li>
							<li><a href="#">优惠券介绍</a></li>
							<li><a href="#">余额介绍</a></li>
							<li><a href="#">就业班课程</a></li>
							<li><a href="#">更多&gt;&gt;</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">推荐课程</div>
						<ul>
							<li><a href="#">JavaScript训练营</a></li>
							<li><a href="#">前端开发</a></li>
							<li><a href="#">大全栈工程师</a></li>
							<li><a href="#">Linux云计算</a></li>
							<li><a href="#">数据库开发</a></li>
						</ul>
					</div>
				</div>
				<!-- 右边 -->
				<div class="right">
					<div class="gongzhonghao">
						<p>公众号</p>
						<img src="img/erweima.jpg">
					</div>
					<div class="douyinhao">
						<p>抖音号</p>
						<img src="img/douyinhao.jpg">
					</div>
				</div>
			</div>
		</div>
		<div class="foot2">
			<div class="container">
				<div class="foot2-box">
					<p>地址：武汉市黄陂区武湖街道汉口北大道1号武汉文理学院</p>
					<p>©2022-2023武汉米泡教育科技有限公司版权所有 京ICP备16378246号-1</p>
					<p><img src="img/备案.png">京公网安备 11010102002019号</p>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#input').keydown(function(e) {
				if (e.keyCode == 13) {
					let keyword = $(this).val()
					$(window).attr('location', '/input.html?keyword=' + keyword);
				}
			})
			$('#tabs>div:first-child>span').click(function() {
				$(this).addClass('cur').siblings().removeClass('cur')
				// 获取当前点击项的 自定义属性 index
				const index = this.dataset.index
				// $div: 通过序号读取的 标题对应的 内容的div
				const $div = $('#tabs>div:last-child>div').eq(index)
				$div.addClass('cur').siblings().removeClass('cur')
			})
		</script>
		<script src="./js/PersonalCenter.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
